<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            margin: 20px;
        }
        
        span {
            float: left;
            font-size: 60px;
            background: #ccc;
            color: yellow;
        }
    </style>
</head>

<body>
    <div class="box">
        <span>☆</span>
        <span>☆</span>
        <span>☆</span>
        <span>☆</span>
        <span>☆</span>
    </div>
    <script src="js/jquery.min.js"></script>
    <script>
        // 鼠标进入时,当前星星之前的(包括自己)变为实心,当前星星之后的保持空心
        $('.box').on('mouseenter', 'span', function() {
            $(this).text('★').css('color', 'yellow')
                .prevAll().text('★').css('color', 'yellow').end()
                .nextAll().text('☆')
        });
        //鼠标点击时,给当前星星添加类名
        $('.box').on('click', 'span', function() {
            //先清除上一次带有active类名标签
            $('span.active').removeClass('active');
            //给新的被点击的元素添加active类名
            $(this).addClass('active')
        });
        //鼠标离开box时
        $('.box').on('mouseleave', function() {
            // 判断是否有active类名
            if ($(this).find('.active')[0]) {
                // true,当前带有active类名的星星之前的(包括自己)变为实心,当前星星之后的保持空心
                $(this).find('.active').text('★').css('color', 'yellow')
                    .prevAll().text('★').css('color', 'yellow').end()
                    .nextAll().text('☆')
            } else {
                $(this).children().text('☆')
            }
        })
    </script>
</body>

</html>